<template>
  <div class="video-portal">
    <!-- 分类标题和描述 -->
    <div class="portal-header">
      <h2 class="portal-title">{{ category.categoryName }}</h2>
      <p v-if="category.summary" class="portal-description">{{ category.summary }}</p>
    </div>
    
    <!-- 视频列表 -->
    <div class="video-list">
      <div class="video-row">
        <div 
          v-for="article in articles" 
          :key="article.articleId" 
          class="video-col"
        >
          <div class="video-card">
            <!-- 视频封面和播放按钮 -->
            <div class="video-thumbnail" @click="playVideo(article)">
              <img 
                :src="article.coverImage || '/static/images/default-video.jpg'" 
                :alt="article.title"
                class="video-img"
              >
              <div class="play-overlay">
                <i class="el-icon-video-play"></i>
              </div>
              <div class="duration-badge" v-if="article.duration">
                {{ formatDuration(article.duration) }}
              </div>
            </div>
            
            <!-- 视频信息 -->
            <div class="video-details">
              <h5 class="video-title">
                <router-link :to="`/article/${article.articleId}`">{{ article.title }}</router-link>
              </h5>
              <div class="video-meta">
                <span class="views"><i class="el-icon-view"></i> {{ article.viewCount || 0 }}</span>
                <span class="date">{{ formatDate(article.publishTime) }}</span>
              </div>
              <div class="video-author" v-if="article.author">
                <i class="el-icon-user"></i> {{ article.author }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="total > pageSize">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    
    <!-- 视频模态框 -->
    <el-dialog 
      :visible.sync="videoDialogVisible" 
      :title="currentVideo.title"
      width="70%"
      top="5vh"
      @closed="currentVideo = null"
    >
      <video 
        v-if="currentVideo" 
        :src="currentVideo.videoUrl" 
        controls
        autoplay
        class="dialog-video"
      ></video>
      <div class="dialog-footer" slot="footer">
        <router-link 
          :to="`/article/${currentVideo.articleId}`" 
          class="el-button el-button--primary"
        >
          查看详情
        </router-link>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'VideoPortal',
  props: {
    category: {
      type: Object,
      required: true
    },
    articles: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 12,
      videoDialogVisible: false,
      currentVideo: null
    }
  },
  computed: {
    paginatedArticles() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.articles.slice(start, end)
    }
  },
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return '未知'
      const date = new Date(dateStr)
      return date.toLocaleDateString()
    },
    formatDuration(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins}:${secs < 10 ? '0' + secs : secs}`
    },
    handlePageChange(page) {
      this.currentPage = page
      this.$emit('page-change', page)
    },
    playVideo(article) {
      this.currentVideo = article
      this.videoDialogVisible = true
    }
  },
  watch: {
    articles: {
      immediate: true,
      handler(newVal) {
        this.total = newVal.length
      }
    }
  }
}
</script>

<style>
.video-portal {
  padding: 20px 0;
  background-color: #f8f9fa;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.portal-header {
  margin-bottom: 30px;
  text-align: center;
}

.portal-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.portal-title:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #3498db, #9b59b6);
}

.portal-description {
  color: #666;
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.video-list {
  width: 100%;
}

.video-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.video-col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.video-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.video-card:hover .play-overlay {
  opacity: 0.8;
}

.video-thumbnail {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  cursor: pointer;
}

.video-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.video-thumbnail:hover .video-img {
  transform: scale(1.05);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.play-overlay i {
  color: #fff;
  font-size: 50px;
}

.duration-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.video-details {
  padding: 15px;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.video-title a {
  color: #333;
  transition: color 0.2s;
  text-decoration: none;
}

.video-title a:hover {
  color: #3498db;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.video-meta .views i {
  margin-right: 3px;
}

.video-author {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.video-author i {
  margin-right: 5px;
  color: #999;
}

.dialog-video {
  width: 100%;
  max-height: 70vh;
  background: #000;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .video-col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  
  .video-title {
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  .video-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .portal-title {
    font-size: 24px;
  }
  
  .video-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.loading-container {
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
  color: #666;
}

.loading-container i {
  font-size: 24px;
  margin-right: 10px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>